<template>
    <div class="xjtuwennavbox">
        <div class="xjtuwennavtitle"><span>底部导航</span></div>
        <div class="xjtuwennavcontent">
            <div class="xjselectlink">
                <p>
                    <el-select v-model="value" placeholder="请选择" @change="selectnav">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </p>
            </div>
            <div class="xjselectlink" v-for="(item, index) in menubar" :key="index">
                <p>
                    <el-input v-model="item.text"></el-input>
                </p>
                <p>
                    <el-button class="xjbutton" size="mini" @click="setbutton(index)">选择图标</el-button>
                </p>
                <p>
                    <el-button size="mini" v-if="item.islink" @click="setLink(index)">选择链接</el-button>
                    <el-link v-if="item.islink" type="primary" :href="item.url" class="ml-10"
                        ><span style="color: black" v-if="item.title">链接：</span><span style="color: black" v-if="!item.title">/</span
                        >{{ item.title }}</el-link
                    >
                    <el-tag v-if="!item.islink">该为固定链接不可设置链接</el-tag>
                </p>
            </div>
        </div>
        <el-dialog title="选择图标" :visible.sync="dialogVisible" width="30%" :modal="false" style="margin-left: 30%">
            <div class="avatar-uploader" @click="updateuploadimg">
                <img v-if="menubar[nowindex].src" :src="menubar[nowindex].src" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </div>
            <p>
                <el-tag>只能上传jpg/png文件，且不超过1000kb</el-tag>
            </p>
            <p>建议尺寸50*50像素的图片,<span style="color: red">点击上传图片然后保存才能生效</span></p>
            <p>
                <el-button class="xjbutton" size="small" @click="updateuploadimg">上传自定义图标</el-button
                ><el-button size="small" @click="resetdefault">恢复默认设置</el-button>
            </p>
            <p class="sysspan"><span>系统图标</span></p>
            <p class="sysbutton">
                <img
                    style="width: 50px; height: 50px"
                    v-for="item in sysbtnlist"
                    :key="item.name"
                    :src="item.src"
                    alt=""
                    @click="selectsysbtn(item)"
                />
                <!-- <van-icon :name="item1.name" :color="item1.color" class="sysbtnpos" size="2.5rem" v-for="(item1,index1) in sysbtnlist" @click="selectsysbtn(item1)" :key="index1"/> -->
            </p>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <uploadimage ref="uploadimagecom" v-on:childByImageValue="childByImageValue"></uploadimage>
        <xjsetlink ref="xjsetlinkcom" v-on:childByLinkValue="childByLinkValue"></xjsetlink>
    </div>
</template>

<script>
import uploadimage from '@/components/common/uploadimage.vue';
import xjsetlink from '@/components/shop/xjsetlink.vue';
import { getSysButton, getshowuploadicon } from '../../api/index.js';
export default {
    props: ['menubar'],
    components: {
        uploadimage,
        xjsetlink
    },
    data() {
        return {
            options: [
                {
                    value: 4,
                    label: '4列'
                },
                {
                    value: 5,
                    label: '5列'
                }
            ],
            value: 4,
            dialogVisible: false,
            sysbtnlist: [],
            nowindex: 0
        };
    },
    methods: {
        async query() {
            let rst = await getshowuploadicon();
            console.log(rst);
            this.sysbtnlist = rst.data;
        },
        setLink(index) {
            this.nowindex = index;
            this.$refs.xjsetlinkcom.dialogVisible = true;
        },
        selectnav() {
            switch (this.value) {
                case 4:
                    if (this.$parent.tabbar.length == 5) {
                        this.$parent.tabbar.splice(3, 1);
                    }
                    break;
                case 5:
                    if (this.$parent.tabbar.length == 4) {
                        this.$parent.tabbar.splice(3, 0, {
                            title: '',
                            text: '自定义4',
                            name: 'photo',
                            src: '',
                            purl: '',
                            url: '',
                            islink: true
                        });
                    }
                    break;
            }
        },
        setbutton(index) {
            this.nowindex = index;
            this.dialogVisible = true;
        },
        selectsysbtn(item) {
            this.$parent.tabbar[this.nowindex].src =item.src;
            // this.$parent.tabbar[this.nowindex].name = item.name;
            // this.$parent.tabbar[this.nowindex].color = item.color;
            this.dialogVisible = false;
        },
        childByImageValue: function (childValue) {
            this.$parent.tabbar[this.nowindex].name = '';
            this.$parent.tabbar[this.nowindex].src = childValue;
        },
        updateuploadimg() {
            //显示上传组件
			console.log(111)
            this.$refs.uploadimagecom.dialogVisible = true; //显示上传对话框
        },
        resetdefault() {
            this.$parent.tabbar = [
                //底部菜单元素信息
                { title: '', text: '首页', name: 'wap-home-o', color: '', src: '', purl: '', url: '', islink: false },
                { title: '', text: '分类', name: 'notes-o', color: '', src: '', purl: '', url: '', islink: false },
                { title: '', text: '购物车', name: 'cart-o', color: '', src: '', purl: '', url: '', islink: false },
                { title: '', text: '我', name: 'user-o', color: '', src: '', purl: '', url: '', islink: false }
            ];
        },
        childByLinkValue(childValue) {
            console.log(childValue)
            this.$parent.tabbar[this.nowindex].title = childValue.title;
            this.$parent.tabbar[this.nowindex].url = childValue.url;
        }
    },
    computed: {},
    created() {
        this.query();
        // getSysButton().then((res)=>{
        // 	this.sysbtnlist=res.list;
        // });
    }
};
</script>

<style lang="scss">
//@import "@/assets/css/common.scss";
.xjtuwennavbox {
    width: 350px;
    display: flex;
    flex-direction: column;
    .avatar-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 100px !important;
        height: 100px !important;
        text-align: center;
    }

    .avatar-uploader:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 50px;
        height: 50px;
        line-height: 100px;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
    .xjbutton {
        background-color: $shenlv;
        color: white;
        display: inline-block;
    }
    .sysspan {
        font-size: 18px;
        font-weight: 600;
        margin-top: 10px;
    }
    .sysbutton {
        margin-top: 5px;
        .sysbtnpos {
            margin-right: 5px;
            margin-bottom: 5px;
        }
    }
    .xjtuwennavtitle {
        width: 100%;
        height: 30px;
        background-color: $danlv;
        border: 1px solid $qianlv;

        span {
            margin-left: 10px;
            font-size: 12px;
            line-height: 30px;
            color: $shenlv;
        }
    }

    .xjtuwennavcontent {
        width: 100%;
        // height: 100%;
        background-color: white;
        border: 1px solid $qianlv;

        .xjselectlink {
            margin-top: 20px;
            margin-bottom: 20px;

            p {
                margin-top: 3px;
                font-size: 12px;
                margin-left: 15px;
                input {
                    height: 35px;
                    width: 300px;
                }
            }
        }

        .van-uploader__wrapper {
            flex-direction: column;
        }
    }
}
</style>
